/* eslint-disable @typescript-eslint/no-unused-vars */
import { getHistoryDataList } from "@/api/modules/iot/data";
import BaseMap from "@/components/Map/antvl7/BaseMap";
import splitpane, { ContextProps } from "@/components/SplitPane";
import { useSensorHistory } from "@/hooks/useSensorHistory";
import { shortcuts } from "@/hooks/useTime";
import { dataFormat } from "@/utils/format";
import { MarkerDataInfo } from "@/utils/gps";
import { defineComponent, PropType } from "vue";
export default defineComponent({
	components: { splitpane },
	props: {
		dataInfo: {
			type: Object as PropType<MarkerDataInfo | any>,
			default() {
				return {};
			}
		},
		devSn: {
			type: String,
			default() {
				return "";
			}
		},
		dataKey: {
			type: String,
			default() {
				return "";
			}
		}
	},
	emits: ["address"],
	setup(props, { emit }) {
		let map = ref();
		const state = reactive({
			pagination: { page: 1, pageSize: 20 },
			settingTB: {
				minPercent: 20,
				defaultPercent: 55,
				split: "horizontal"
			} as ContextProps,
			dataList: [],
			mimiTable: false,
			showMap: false,
			timeRange: []
		});

		const { featchHistory } = useSensorHistory(props.devSn, props.dataKey);
		//查询历史轨迹
		const featchHistoryGps = async () => {
			let res = await featchHistory({ startTime: state.timeRange[0], endTime: state.timeRange[1] });
			let result = (res.result as any) || [];
			state.dataList = result;
			if (state.dataList.length) {
				map.value.initLine(state.dataList);
			} else {
				map.value.initMarker(props.dataInfo, true);
			}
		};
		const pageDataList = computed<any[]>(() => {
			let start = (state.pagination.page - 1) * state.pagination.pageSize;
			let end = start + state.pagination.pageSize;
			return state.dataList.reverse().slice(start, end);
		});
		const point = (row: any, key: string) => {
			try {
				let info = JSON.parse(row.value);
				return info[key];
			} catch (e) {}
			return "--";
		};
		const clickTableRow = (row: any) => {
			if (!row.value) {
				return;
			}
			map.value.initMarker(
				{
					...row,
					location: typeof row.value == "string" ? JSON.parse(row.value) : row.value
				},
				true
			);
		};
		const changeAddress = (address: any) => {
			props.dataInfo.location = address;
			emit("address", address);
		};
		return () => {
			return (
				<div class="h-full">
					<div class="flex justify-end p-2">
						<div></div>
						<div>
							<span class="pr-2">时间范围</span>
							<el-date-picker
								v-model={state.timeRange}
								style="width:340px"
								type="datetimerange"
								shortcuts={shortcuts()}
								range-separator="至"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								onChange={() => featchHistoryGps()}
							/>
							<el-button style="margin-top:-5px" onClick={featchHistoryGps}>
								<i class="iconfont iconbx-sync" />
								查询
							</el-button>
						</div>
					</div>
					<div style="height:calc(100% - 80px)">
						<splitpane splitSet={state.settingTB}>
							{{
								paneL: () => {
									return (
										<BaseMap
											ref={map}
											onLocation={(address: any) => changeAddress(address)}
											onInit={featchHistoryGps}
											detail={props.dataInfo}
										/>
									);
								},
								paneR: () => {
									return (
										<div class="relative h-full bg-white">
											{
												// <div
												// 	onClick={() => (state.mimiTable = !state.mimiTable)}
												// 	class={`toggle-mini-table iconfont ${state.mimiTable ? "iconchevrons-up" : "iconchevrons-down"}`}
												// 	title={`${state.mimiTable ? "展开列表" : "收起列表"}`}
												// ></div>
											}
											<el-table
												data={pageDataList.value}
												stripe
												highlight-current-row
												class="mini-table"
												onRowClick={clickTableRow}
											>
												<el-table-column
													align="center"
													type="index"
													width="60"
													index={(i: number) => (state.pagination.page - 1) * state.pagination.pageSize + i + 1}
												/>
												<el-table-column prop="devSn" label="设备" width="220" />
												<el-table-column prop="updateTime" label="时间" width="180">
													{{
														default: (scope: any) => {
															return dataFormat("datetime", scope.row.updateTime);
														}
													}}
												</el-table-column>
												<el-table-column prop="latitude" label="纬度">
													{{
														default: (scope: any) => {
															return typeof scope.row.value == "string"
																? point(scope.row.value, "latitude")
																: scope.row.value.lat || scope.row.value.latitude;
														}
													}}
												</el-table-column>
												<el-table-column prop="longitude" label="经度">
													{{
														default: (scope: any) => {
															return typeof scope.row.value == "string"
																? point(scope.row.value, "longitude")
																: scope.row.value.lng || scope.row.value.longitude;
														}
													}}
												</el-table-column>
											</el-table>
											<div class="flex justify-end pt-1 pr-2">
												<el-pagination
													v-model:current-page={state.pagination.page}
													v-model:page-size={state.pagination.pageSize}
													background
													page-sizes={[10, 50, 100, 500]}
													small
													layout="total, sizes, prev, pager, next"
													total={state.dataList.length}
												/>
											</div>
										</div>
									);
								}
							}}
						</splitpane>
					</div>
				</div>
			);
		};
	}
});
